import React, { Component } from 'react'
import Home from './Home'
import eventBus from './utils/event-bus'

export class App extends Component {
  constructor() {
    super()
    this.state = {
      name: '',
      age: 0,
    }
  }

  // 箭头函数解决this指向问题
  changeData = (name, age) => {
    this.setState({
      name,
      age,
    })
  }

  componentDidMount() {
    // 手动传入this指向
    eventBus.on('bannerPrev', this.changeData, this)
  }

  componentWillUnmount() {
    eventBus.off('bannerPrev', this.changeData)
  }

  render() {
    const { name, age } = this.state
    return (
      <div>
        <h2>
          Home Components,参数传递name: {name}, age: {age}
        </h2>
        <Home />
      </div>
    )
  }
}

export default App
